<!--递归组件-->
<script setup lang="ts">
import {reactive} from "vue";

interface Tree {
  name: string,
  checked: boolean,
  children?: Tree[]
}

defineProps<{
  data?: Tree[]
}>()

const clickTap = (item: Tree, e) => {
  console.log(item)
}
</script>

<template>
  <div class="tree" v-for="item in data">
    <input @click.stop="clickTap(item,$event)" v-model="item.checked" type="checkbox"><span>{{ item.name }}</span>
    <!--  使用可选链操作符(?)可以避免获取null/undefined的下级时报错(undefined.length)  -->
    <!--  undefined ?? [] "??"返回另一个值[]-->
    <Tree v-if="item?.children?.length" :data="item?.children"></Tree>
  </div>
</template>

<style scoped lang="scss">
.tree {
  margin-left: 10px;
}
</style>